<form class="pure-form pure-form-aligned">
    <fieldset>
        <legend> Advance Search</legend>
        
        <div class="pure-control-group">
            <label for="Category">Category</label>
            <select id="category" class="pure-input-1-2"></select>
        </div>

        <div class="pure-control-group">
            <label for="price_from">Price from</label>
                        <input id="price_from" type="text">
                        <label for="price_to">To</label>
                        <input id="price_to" type="text">
        </div>
        
        <button type="submit" class="pure-button pure-button-primary pure-button-success">Search</button>
        <button type="submit" class="pure-button pure-button-primary pure-button-error">Clear</button>
    </fieldset>
</form>

<div class="items">
    <table class="pure-table">
        <thead>
            <tr>
                <th>#</th>
                <th onclick="sortByCategory()"><a href="#">Category</a></th>
                <th onclick="sortByName()"><a href="#">Name</a></th>
                <th onclick="sortByPrice()"><a href="#">Price</a></th>
                <th>Overview</th>
                <th>Date</th>
                <th></th>
            </tr>
        </thead>

        <tbody id="tableBady">

        </tbody>
    </table>
    <ul class="pure-paginator" id="pages"></ul>
</div>

<script>
    var category =<?php echo $this->categories?>;
    var allItems =  <?php echo $this->items?>;
    var itemsPerPage = 20;
    var numOfPages;
    var currentPage = 0;
    
    var items = allItems;

    function isOdd(num) {
        return num % 2;
    }
    
    function getCategoryNameById( id){
        for (var i=0; i < category.length; i++)
           if ( category[i].id == id ) return category[i].name;
    }

    function createTableRow(item, num) {
        var str = "";
        
        if (isOdd(num))
                str += '<tr class="pure-table-odd">';
            else
                str += '<tr>';
                
        str += '<td>' + (num + 1) + '</td>';
        str += '<td>' + getCategoryNameById(item.categoryId)+'</td>';
        str += '<td>' + item.name + '</td>';
        str += '<td>' + item.price + '</td>';
        str += '<td>' + item.overview + '</td>';
        str += '<td>' + item.date + '</td>';
        str += '<td><a href="">View</a></td>';
        
        str += '</tr>';
        return str;
    }
    
    function min( a, b)
    {
        return a < b ? a : b;
    }

    function setItems(num) {
        var str = "";
        currentPage = num;
        $('#pages').empty();
        str = '<li><a class="pure-button prev" href="#" onclick="prev()">&#171;</a></li>';
        numOfPages = Math.ceil(items.length / itemsPerPage);
        for (var j = 0; j < numOfPages; j++){
            if ( currentPage == j) str += '<li><a class="pure-button pure-button-active" href="#" onclick="setItems('+j+')">' + (j + 1) + '</a></li>';
            else str += '<li><a class="pure-button" href="#" onclick="setItems('+j+')">' + (j + 1) + '</a></li>';
        }
        str += '<li><a class="pure-button next" href="#" onclick="next()">&#187;</a></li>';

        $('#pages').append(str);
        
        str = '';
        $('#tableBady').empty();
        var stopAt = min(num * itemsPerPage + itemsPerPage, items.length);
        

        for (var j = num * itemsPerPage; j < stopAt; j++)
            str += createTableRow( items[j], j);

        $('#tableBady').append(str);

    }


    $(document).ready(function() {

        var str = "";

        for (var i = 0; i < category.length; i++)
            str += '<option value="' + category[i].id + '">' + category[i].name + '</option>';

        $('#category').append(str);

        

        setItems(0);
    });
    
    $('#search').keyup(function() {
        var tmpArr = new Array();
        var value = $('#search').val();
        var index = 0;
        
        for ( var i = 0; i < allItems.length; i++)
        {
            if ( allItems[i].name.indexOf(value) != -1)
                tmpArr[index++] = allItems[i];
        }
        items = tmpArr;
        setItems( 0);
        
        return false;
    });
    
    function next(){
        if ( currentPage < numOfPages-1)
        {
            setItems( currentPage+1);
        }
    }
    
    function prev(){
        if ( currentPage > 0)
        {
            setItems( currentPage-1);
        }
    }
    
    function comparePrice(a,b) 
    {
        a = parseFloat(a.price);
        b = parseFloat(b.price);
          if (a < b)
             return -1;
          if (a > b)
            return 1;
          return 0;
      }
      
    function sortByPrice()
    {
        items.sort(comparePrice);
        setItems(currentPage);
    }
    
    function compareName(a,b) 
    {
        a = a.name, b = b.name;
        for (var i=0,n=Math.max(a.length, b.length); i<n && a.charAt(i) === b.charAt(i); ++i);
            if (i === n) return 0;
        return a.charAt(i) > b.charAt(i) ? 1 : -1;
      }
      
    function sortByName()
    {
        items.sort(compareName);
        setItems(currentPage);
    }
    
    function compareCategory(a,b) 
    {
         a = parseInt(a.categoryId);
         b = parseInt(b.categoryId);
          if (a < b)
             return -1;
          if (a > b)
            return 1;
          return 0;
      }
      
    function sortByCategory()
    {
        items.sort(compareCategory);
        setItems(currentPage);
    }
</script>